<template>
    <div>
        <el-table :data="props.list" style="width: 100%" size="large" :height="props.height" border :fit="true"
            row-class-name="row_name" :header-cell-style="{
            textAlign: 'center',
            height: '42px',
            background: '#e9f2fa',
        }">
            <el-table-column prop="no" label="信息编号" align="center" width="200" />
            <el-table-column prop="cat_1_msg" label="类别" align="center" width="100" />
            <el-table-column prop="area_whole_msg" label="发布地区" align="center" width="100" />
            <el-table-column label="信息类型" align="center" width="100">
                <template #default="scope">
                    {{ scope.row.style === 1 ? "普通信息" : "vip信息" }}
                </template>
            </el-table-column>
            <el-table-column prop="refresh_times" label="刷新次数" align="center" width="100" />
            <el-table-column label="付款订单" align="center" width="100">
                <template #default="scope">
                    {{ scope.row.is_pay === 1 ? "是" : "不是" }}
                </template>
            </el-table-column>
            <el-table-column label="用户" align="center" width="100">
                <template #default="scope">
                    {{ scope.row.nickname }} <br>{{ scope.row.number }}
                </template>
            </el-table-column>
            <el-table-column label="计划结束时间" align="center" width="200">
                <template #default="scope">
                    {{ get_time(scope.row.plain_end_time) }}
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center" width="200" />
            <el-table-column label="信息状态" align="center" width="100">
                <template #default="scope">
                    {{ status_list[scope.row.status] }}
                </template>
            </el-table-column>
            <el-table-column prop="admin_nickname" label="维护人" align="center" width="100" />
            <el-table-column prop="done_time" label="完结时间" align="center" width="200" />
            <el-table-column fixed="right" label="操作" align="center" width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="view_data(scope.row)">查看</el-button>
                    <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">复制</el-button>
                    <el-button type="danger" size="small" @click="detail(scope.row)"
                        v-if="scope.row.status == 1000">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" width="30%">
            <!-- <div v-if="!ruleForm.detele">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                    size="large">
                    <el-form-item label="信息编号">
                        <el-input v-model="ruleForm.no" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="类别">
                        <el-input v-model="ruleForm.cat_2_msg" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="发布地区">
                        <el-input v-model="ruleForm.area_whole_msg" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="信息类型">
                        <el-input v-model="ruleForm.style" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="刷新次数">
                        <el-input v-model="ruleForm.refresh_times" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="付款订单">
                        <el-input v-model="ruleForm.is_pay" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="用户">
                        <el-input v-model="ruleForm.nickname" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="计划结束时间">
                        <el-input v-model="ruleForm.plain_end_time" autocomplete="off" disabled />
                    </el-form-item>

                    <el-form-item label="创建时间">
                        <el-input v-model="ruleForm.created_at" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="信息状态">
                        <el-input v-model="ruleForm.status" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="维护人">
                        <el-input v-model="ruleForm.admin_nickname" autocomplete="off" disabled />
                    </el-form-item>
                    <el-form-item label="完结时间">
                        <el-input v-model="ruleForm.done_time" autocomplete="off" disabled />
                    </el-form-item>
                </el-form>
            </div> -->
            <div>
                {{ ruleForm.detele_str }}
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import useClipboard from 'vue-clipboard3'
import { get_time } from "@/utils/time"
import router from "@/router";
import { defineProps, reactive, ref } from "vue"
import { dispose_data } from "@/request/api/search.ts"
import { reload } from "@/utils/flushed"
let dialogVisible = ref(false)
// 定义一个信息状态数组
const status_list = { 0: "支付中", 1: "进行中", 2: "已取消", 3: "已删除", 4: "已驳回", 5: "已通过", 6: "已移交", 7: "vip待创建", 1000: "待删除" }
const props = defineProps(["height", "list"])
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
    copy(row.content)
}
const view_data = (row: any) => {
    // ruleForm.no = row.no
    // ruleForm.cat_2_msg = row.cat_2_msg
    // ruleForm.area_msg = row.area_msg
    // ruleForm.style = row.style === 1 ? "普通信息" : "vip信息"
    // ruleForm.refresh_times = row.refresh_times
    // ruleForm.is_pay = row.is_pay=== 1 ? "是" : "不是"
    // ruleForm.nickname = row.nickname + "" + row.number
    // // ruleForm.number = row.number
    // ruleForm.plain_end_time =get_time(row.plain_end_time)
    // ruleForm.created_at = row.created_at
    // ruleForm.status = row.status
    // ruleForm.admin_nickname = row.admin_nickname
    // ruleForm.done_time = row.done_time
    // dialogVisible.value = true
    if (row.id == "1000") {
        ruleForm.detele_str == row.deleted_keyword
        dialogVisible.value = true
    } else {
        let obj = JSON.parse(JSON.stringify(row));
        router.push({
            name: "taskdetail", state: {
                obj
            }
        })
    }
}
let ruleForm = reactive({
    no: "",
    cat_2_msg: "",
    area_msg: "",
    style: "",
    refresh_times: "",
    is_pay: "",
    nickname: "",
    number: "",
    plain_end_time: "",
    created_at: "",
    status: "",
    admin_nickname: "",
    done_time: "",
    detele_str : ""
})
// 点击复制
// 使用插件
const { toClipboard } = useClipboard()
const copy = async (msg: any) => {
    try {
        // 复制
        await toClipboard(msg)
        ElMessage({
            message: '复制成功',
            type: 'success',
        })
        // 复制成功
    } catch (e) {
        // 复制失败
        ElMessage.error("复制失败")
    }
}
const detail = async (row: any) => {
    let { data } = await dispose_data({
        id: row.id,
        style: "1000"
    })
    if (data.code != 200)
        return ElMessage({
            message: data.message,
            type: 'error',
        });
    ElMessage({
        message: '操作成功',
        type: 'success',
    });
    reload()
}
</script>
<style lang="scss" scoped>
:deep(.cell) {
    color: #5e6d82;
    font-size: 13px;
}

:deep(thead) {
    .cell {
        color: #1f2f3d;
        font-size: 14px;
        font-weight: 650;
    }
}

:deep(.el-dialog) {
    margin-top: 20px;
}

:deep(.row_name) {
    height: 42px !important;
}

:deep(.el-table__cell) {
    padding: 0;
}
</style>